<template>
  <gt_guild>
    <template v-slot:nocard v-if="gd.gload == false">
      <template v-if="gd.guild?.boss_data?.data?.length >= 1">
        <div class="nbox1">
          <n-flex justify="center" style="margin-bottom: 6px">
            <n-button
              :type="val.type == 'guild' ? 'warning' : 'default'"
              @click="val.type = 'guild'"
              :size="cfg.mobile ? 'small' : ''"
              >公会图表</n-button
            >
            <n-button
              :type="val.type == 'user' ? 'warning' : 'default'"
              @click="val.type = 'user'"
              :size="cfg.mobile ? 'small' : ''"
              >成员图表</n-button
            >
          </n-flex>
          <n-select
            :size="cfg.mobile ? 'small' : ''"
            style="margin-top: 8px"
            v-model:value="val.useruid"
            :options="val.userinfo"
            @update:value="ct.upsluser"
          />
          <template v-if="val.type == 'guild'">
            <n-grid y-gap="6" x-gap="6" :cols="1">
              <!-- 公会伤害 -->
              <n-gi>
                <div class="gtcard_div">
                  <div class="gtcard_box">
                    <div class="gtcard_box2">
                      <div class="gtcard_title">公会伤害图表</div>
                      <n-scrollbar x-scrollable>
                        <div style="white-space: nowrap">
                          <div class="div-gd-bossinfo">
                            <div class="_div" v-for="(item, key) in val.bossinfo">
                              <div :class="`div-gd-bscolor${item} div-gd-bscolor`"></div>
                              <span>{{ key }}</span>
                            </div>
                          </div>
                          <div class="div-guilddmg">
                            <div class="box-guilddmg" v-for="(item, key) in val.gdmg">
                              <div class="_btm">
                                <template v-if="item.minlv == item.maxlv"></template
                                ><template v-else
                                  ><br />({{ item.minlv }}-{{ item.maxlv }})</template
                                ><br />{{ item.dmg?.toLocaleString() }}
                              </div>
                              <div
                                class="box-guilddmg-box"
                                :style="`height:${330 * item.bfb}px;`"
                              >
                                <div
                                  v-for="(item2, key2) in item.boss"
                                  :class="`box-gd-box${item2.key} box-gd-box`"
                                  :style="`height:${item2.bfb}%;`"
                                >
                                  <div style="_div">
                                    <img class="_b" :src="cfg.function.boss_ava(key2)" />

                                    <span class="_font">{{
                                      item2.dmg?.toLocaleString()
                                    }}</span>
                                  </div>
                                </div>
                              </div>
                              <div class="_btm">{{ key }}</div>
                            </div>
                          </div>
                        </div>
                      </n-scrollbar>
                    </div>
                  </div>
                </div>
              </n-gi>
            </n-grid>

            <n-grid y-gap="12" x-gap="12" :cols="1">
              <n-gi>
                <!-- 出刀分布 -->
                <div class="gtcard_div">
                  <div class="gtcard_title">出刀时间图表</div>
                  <div class="gtcard_box">
                    <div class="gtcard_box2" style="min-height: 300px">
                      <div>
                        <echarts
                          :opt="val.user_daotime"
                          :style="`height:250px; width:100%;`"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </n-gi>
            </n-grid>
          </template>
          <template v-if="val.type == 'user'">
            <div class="gtcard_div">
              <div class="gtcard_title">个人伤害图表</div>
              <div class="gtcard_box2">
                <n-scrollbar x-scrollable>
                  <div style="white-space: nowrap">
                    <div class="div-gd-bossinfo">
                      <div class="_div" v-for="(item, key) in val.bossinfo">
                        <div :class="`div-gd-bscolor${item} div-gd-bscolor`"></div>
                        <span>{{ key }}</span>
                      </div>
                    </div>

                    <div class="gc-user-df">
                      <div
                        class="gc-user-df-box"
                        v-for="(item, key) in val.userdata?.data"
                      >
                        <div class="_btm">{{ item.dmg?.toLocaleString() }}</div>
                        <div class="gc-user-box" :style="`height:${390 * item.bfb}px;`">
                          <template v-for="(item2, key2) in item.boss">
                            <div
                              :class="`gc-user-bg-box gc-user-bg-box${item2.key}`"
                              :style="`height:${item2.bfb * 100}%`"
                            >
                              <img class="_b" :src="cfg.function.boss_ava(key2)" />
                              <template v-for="(item3, key3) in item2?.ava">
                                <n-popover
                                  :keep-alive-on-hover="false"
                                  trigger="hover"
                                  raw
                                  :show-arrow="false"
                                >
                                  <template #trigger>
                                    <div class="dfac gc-user-imgdiv">
                                      <img
                                        class="_img"
                                        :src="$cfg.function.ava(item3.zk)"
                                      />
                                      <span class="_span">{{
                                        parseInt(item3.dmg / 10000)
                                      }}</span>
                                    </div>
                                  </template>
                                  <div class="gc-hover">
                                    <p>
                                      类型：<template v-if="item3.cr == 'bc'"
                                        >收尾刀</template
                                      >
                                      <template v-else-if="item3.cr == 'end'"
                                        >补偿刀</template
                                      >
                                      <template v-else-if="item3.cr == 'no'"
                                        >完整刀</template
                                      >
                                    </p>
                                    <p>造成伤害：{{ item3.dmg }}</p>
                                    <p>目标首领：{{ key2 }} Lv.{{ item3.level }}</p>
                                    <p>出刀时间：{{ item3.log_time }}点</p>
                                    <br />
                                    <n-space
                                      ><img
                                        style="width: 35px"
                                        :src="$cfg.function.ava(icon)"
                                        v-for="icon in item3.icon?.split(',')"
                                    /></n-space>
                                  </div>
                                </n-popover>
                              </template>
                            </div>
                          </template>
                        </div>
                        <div class="_btm">{{ key }}</div>
                      </div>
                    </div>
                  </div></n-scrollbar
                >
              </div>
            </div>
            <div class="gtcard_div">
              <div class="gtcard_title">个人刀型波动</div>
              <div class="gtcard_box2">
                <div class="gc-user-dx-div" v-for="(item, key) in val.user_dx">
                  <div>
                    <n-space justify="center"
                      ><img
                        style="
                          margin-right: 6px;
                          margin-left: 5px;
                          width: 45px;
                          border-radius: 5px;
                          background: rgb(76 76 76);
                          padding: 2px;
                          border: solid 1px #333333;
                        "
                        :src="$cfg.function.ava(icon)"
                        v-for="icon in item.icon?.split(',')"
                    /></n-space>
                  </div>
                  <div class="df-gcdx">
                    <div class="df-gcdx-box" v-for="(item2, key2) in item.data">
                      <div>
                        第{{ key2 + 1 }}刀
                        <template v-if="item2.level == item2.mlevel"
                          >Lv.{{ item2.level }}</template
                        >
                        <template v-else
                          ><span style="color: rgb(255 126 126)"
                            >Lv.{{ item2.level }} + Lv.{{ item2.mlevel }}</span
                          ></template
                        >
                      </div>
                      <div>
                        <template v-if="item2.bfb == 0"> / </template>
                        <template v-else-if="item2.bfb < 0">
                          <span style="color: rgb(255 126 126)">{{ item2.bfb }} %</span>
                        </template>
                        <template v-else-if="item2.bfb > 0">
                          <span style="color: var(--base-font-hover-color)"
                            >+{{ item2.bfb }} %</span
                          >
                        </template>
                      </div>
                      <div>{{ item2.damage }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="gtcard_div" style="min-height: 330px">
              <div class="gtcard_title">个人出刀时间</div>
              <div class="gtcard_box2">
                <echarts :opt="val.player_daotime" :style="`height:250px; width:100%;`" />
              </div>
            </div>
          </template>
        </div>
      </template>
    </template>
  </gt_guild>
</template>
<style scoped>
.gc-user-dx-div {
  border-bottom: solid 2px #5a5a5a;
  padding: 8px;
  margin-bottom: 10px;
}
.gc-user-bg-box ._b,
.box-gd-box ._b {
  position: absolute;
  z-index: 0;
  height: 100%;
  opacity: 0.1;
  top: 0;
}

.df-gcdx-box {
  margin: 10px;
  background-color: #68646a;
  padding: 10px;
  border-radius: 3px;
  text-align: center;
}
.gc-user-imgdiv {
  width: 95%;
  justify-content: center;
  margin-bottom: 8px;
  transform: scale(0.92, 0.92);
}

.gc-user-df {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
}

.box-gd-box0,
.div-gd-bscolor0,
.gc-user-bg-box0 {
  background-color: #ffebcd;
}

.box-gd-box1,
.div-gd-bscolor1,
.gc-user-bg-box1 {
  background-color: #00bfff;
}

.box-gd-box2,
.div-gd-bscolor2,
.gc-user-bg-box2 {
  background-color: #d3d3d3;
}

.box-gd-box3,
.div-gd-bscolor3,
.gc-user-bg-box3 {
  background-color: #cdba96;
}
.df-gcdx {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 12px;
  color: #45e0cb;
  text-shadow: 0 0 4px #000;
  justify-content: center;
}
.div-gd-bossinfo span {
  color: #45e0cb;
  text-shadow: 0 0 2px #000;
}
.gc-user-df-box ._span {
  display: block;
  text-align: center;
  margin-left: 5px;
  width: 35px;
}

.gc-user-df-box {
  padding: 5px;
  font-size: 12px;
  text-align: center;
  width: 90px;
  height: 470px;
  text-size-adjust: none;
  color: #000;
  display: flex;
  text-shadow: 0 0 1px #454545;
  flex-direction: column;
  justify-content: flex-end;
}

.gc-user-df-box ._btm {
  color: #c9dae9;
  padding-top: 15px;
  padding-bottom: 5px;
}
.box-gd-box > div {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.box-guilddmg {
  padding: 5px;
  font-size: 12px;
  text-align: center;
  width: 90px;
  height: 450px;
  text-size-adjust: none;
  color: #000;
  display: flex;
  text-shadow: 0 0 1px #454545;
  flex-direction: column;
  justify-content: flex-end;
}
</style>

<script>
//2024/07/17 猫燐
import { cfg } from "@/cfg/cfg.js";
import { getrole } from "@/cfg/function.js";
import gt_guild from "@/comp/gt_guild.vue";
import m_select from "@/comp/m_select.vue";
import echarts from "../../../sys/echarts.vue";

export default {
  components: {
    gt_guild,
    m_select,
    echarts,
  },
  setup() {
    let gd = cfg.guild;
    let val = reactive({
      coldw: cfg.mobile == true ? 500 : 500,
      cols: 1,
      maxlimit: 1,
      bossinfo: {},
      user_dmg: {},
      user_daotime: {
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "0%",
          right: "1.5%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          axisLabel: {
            fontSize: cfg.mobile == true ? `7.7` : `11`,
            color: "#63e2b7",
          },
          type: "category",
          boundaryGap: false,
          data: [
            "0",
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
          ],
        },
        yAxis: {
          axisLabel: {
            fontSize: cfg.mobile == true ? `7.7` : `11`,
            color: "#63e2b7",
          },
          type: "value",
        },
        series: [
          {
            name: "dao",
            type: "line",
            stack: "Total",
            data: [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
            ],
          },
        ],
      },
      player_daotime: {
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "0%",
          right: "1.5%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          axisLabel: {
            fontSize: cfg.mobile == true ? `7.7` : `11`,
            color: "#63e2b7",
          },
          type: "category",
          boundaryGap: false,
          data: [
            "0",
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
          ],
        },
        yAxis: {
          axisLabel: {
            fontSize: cfg.mobile == true ? `7.7` : `11`,
            color: "#63e2b7",
          },
          type: "value",
        },
        series: [
          {
            name: "dao",
            type: "line",
            stack: "Total",
            data: [
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
              0,
            ],
          },
        ],
      },
      uppage: (page) => {
        val.qs.page = page;
        ct.select_click();
      },
      reportdata: [],
      //选择菜单选中
      qs: {},
      //选择菜单列表
      op: {},
    });

    val.select = [
      {
        tips: "选择首领",
        val: "boss",
        width: 8,
        mwidth: 8,
      },
    ];

    let ct = reactive({});

    ct.upsluser = (uid) => {
      let dxdata = {};
      //[出刀时间]重置出刀数
      val.player_daotime.series[0].data?.forEach((data, key) => {
        val.player_daotime.series[0].data[key] = 0;
      });

      val.userdata = {
        data: {},
        dmg: 0,
        max_dmg: 0,
        bfb: 0,
      };
      let udata = val.user_dmg[uid];
      const datearr = gd.guild.date_data.date?.slice()?.reverse();
      const bossarr = gd.guild.boss_data.data;
      datearr.forEach((i, k) => {
        val.userdata.data[`第${k + 1}天`] = {
          boss: {},
          dmg: 0,
          max_dmg: 0,
          bfb: 0,
        };
        bossarr.forEach((i2, k2) => {
          val.userdata.data[`第${k + 1}天`].boss[i2.boss_name] = {
            ava: [],
            dmg: 0,
            bfb: 0,
            key: k2,
          };
        });
      });
      udata.forEach((i, k) => {
        //统计刀型
        if (dxdata[i.icon] == null) {
          dxdata[i.icon] = {
            icon: i.icon,
            data: {},
            count: 0,
          };
        }
        if (dxdata[i.icon].data[i.mao_time] == null) {
          dxdata[i.icon].data[i.mao_time] = {
            time: i.mao_time,
            damage: 0,
            bfb: 0,
            level: i.level,
            mlevel: i.level,
          };
        }
        dxdata[i.icon].count += i.cr_kill;
        dxdata[i.icon].data[i.mao_time].mlevel = i.level;
        dxdata[i.icon].data[i.mao_time].damage += i.damage;
        //[出刀时间]添加数据
        val.player_daotime.series[0].data[i.t]++;

        const time = val.date[i.mao_time];
        val.userdata.dmg += i.damage;
        val.userdata.data[time].dmg += i.damage;
        val.userdata.data[time].boss[i.boss_name].dmg += i.damage;
        val.userdata.data[time].boss[i.boss_name].ava.push({
          zk: i.zk,
          dmg: i.damage,
          b: i.boss_name,
          level: i.level,
          log_time: i.t,
          cr: i.cr_type,
        });
      });
      for (let i in val.userdata.data) {
        if (val.userdata.data[i].dmg > val.userdata.max_dmg) {
          val.userdata.max_dmg = val.userdata.data[i].dmg;
        }
        const v2 = val.userdata.data[i].boss;
        for (let i2 in v2) {
          if (v2[i2].dmg > val.userdata.data[i].max_dmg) {
            val.userdata.data[i].max_dmg = v2[i2].dmg;
          }
        }
      }
      for (let i in val.userdata.data) {
        val.userdata.data[i].bfb = val.userdata.data[i].dmg / val.userdata.max_dmg;
        const v2 = val.userdata.data[i].boss;
        for (let i2 in v2) {
          v2[i2].bfb = v2[i2].dmg / val.userdata.data[i].dmg;
        }
      }
      dxdata = Object.values(dxdata);
      dxdata?.forEach((data, key) => {
        let ndata = Object.values(data.data);

        let bfb = 0;
        let mdmg = 0;
        ndata?.forEach((data2, key2) => {
          if (mdmg == 0) {
            bfb = 1;
            mdmg = data2.damage;
          } else {
            bfb = mdmg / data2.damage;
            mdmg = data2.damage;
          }
          ndata[key2].bfb = ((1 - bfb) * 100).toFixed(3);
        });
        dxdata[key].data = ndata;
      });
      val.user_dx = dxdata;
    };

    //加载公会初始化
    gd.runfunc = async () => {
      val.user_dx = [];
      val.userdata = [];
      if (val.type == null) {
        val.type = "guild";
      }
      if (val.useruid != null) {
        val.useruid = null;
      }
      gd.vuename = "数据图表";
      await gd.getdao();
      //生成下拉菜单用户组
      val.userinfo = [];
      const userarr = gd.guild.user_data;
      userarr.forEach((i, k) => {
        val.userinfo.push({
          value: i.user_id,
          label: i.user_name,
        });
      });
      //获取首领
      val.bossinfo = {};
      const bossarr = gd.guild.boss_data.data;
      bossarr.forEach((data, key) => {
        val.bossinfo[data.boss_name] = key;
      });
      //出刀日期
      val.date = {};
      const datearr = gd.guild?.date_data?.date?.slice()?.reverse();
      datearr.forEach((i, k) => {
        val.date[i] = `第${k + 1}天`;
      });
      val.gdmg = {};
      let day_maxdmg = 0;
      //[出刀时间]重置出刀数
      val.user_daotime.series[0].data?.forEach((data, key) => {
        val.user_daotime.series[0].data[key] = 0;
      });
      //[个人伤害]
      val.user_dmg = {};

      gd.alldao.forEach((i, k) => {
        const time = val.date[i.mao_time];

        //[个人伤害]
        if (val.user_dmg[i.user_id] == null) {
          val.user_dmg[i.user_id] = [];
        }
        val.user_dmg[i.user_id].push(i);

        //[出刀时间]添加数据
        val.user_daotime.series[0].data[i.t]++;
        //[公会伤害]初始化boss
        if (val.gdmg[time] == null) {
          val.gdmg[time] = {
            boss: {},
            bfb: 0,
            dmg: 0,
            daydmg: 0,
          };
          bossarr.forEach((i2, k2) => {
            val.gdmg[time].boss[i2.boss_name] = {
              dmg: 0,
              bfb: 0,
              key: k2,
            };
          });
        }
        //[公会伤害]计算伤害数据
        val.gdmg[time].dmg += i.damage;
        val.gdmg[time].boss[i.boss_name].dmg += i.damage;
      });
      //[公会伤害]循环每日伤害 获取最高伤害那天
      for (let i in val.gdmg) {
        if (val.gdmg[i].dmg > day_maxdmg) {
          day_maxdmg = val.gdmg[i].dmg;
        }
      }
      //[公会伤害]循环每日伤害 计算百分比
      for (let i in val.gdmg) {
        val.gdmg[i].bfb = val.gdmg[i].dmg / day_maxdmg;
        const boss = val.gdmg[i].boss;
        for (let i2 in boss) {
          val.gdmg[i].boss[i2].bfb = (boss[i2].dmg / val.gdmg[i].dmg) * 100;
        }
      }

      //预设成员图表数据
      val.useruid = userarr[0]?.user_id;
      if (val.useruid != null) {
        ct.upsluser(userarr[0]?.user_id);
      }

      val.cols = parseInt(cfg.sswd / val.coldw);
    };

    //如果触发更新公会
    gd.updfunc = async () => {};

    watch(
      () => cfg.sswd,
      (newWidth, oldWidth) => {
        val.cols = parseInt(cfg.sswd / val.coldw);
      }
    );

    onMounted(async () => {
      cfg.updateWidth();
    });

    return {
      cfg,
      ct,
      gd,
      val,
    };
  },
};
</script>
